<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建评审人</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #f5f5f5;
        }
        .form-container {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            margin: 20px auto;
            max-width: 800px;
        }
        .form-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .required-field::before {
            content: "* ";
            color: red;
        }
        .form-footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        .btn-save {
            background-color: #007e66;
            border-color: #007e66;
            color: white;
            width: 120px;
        }
        .btn-cancel {
            background-color: #e0e0e0;
            border-color: #e0e0e0;
            color: #333;
            width: 120px;
        }
        .input-with-unit {
            position: relative;
        }
        .unit-label {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        .search-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .close-icon {
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-container">
            <div class="form-header">
                <h3>新建评审人</h3>
            </div>

            <form id="reviewerForm">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="projectName" class="required-field">项目名称:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="projectName" required>
                            <div class="close-icon">
                                <i class="fa fa-times"></i>
                            </div>
                            <div class="search-icon">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="projectNumber">项目编号:</label>
                        <input type="text" class="form-control" id="projectNumber" value="20230821095" readonly>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="constructionUnit" class="required-field">建设单位:</label>
                        <input type="text" class="form-control" id="constructionUnit" value="富士市中医院建院院区" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="department" class="required-field">所属部门:</label>
                        <input type="text" class="form-control" id="department" value="富士市中医院建院院区" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="contactPerson" class="required-field">联系人:</label>
                        <input type="text" class="form-control" id="contactPerson" value="李某某" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="contactPhone" class="required-field">联系电话:</label>
                        <input type="text" class="form-control" id="contactPhone" value="13683544763" required>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="name" class="required-field">姓名:</label>
                        <input type="text" class="form-control" id="name" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="phone" class="required-field">联系电话:</label>
                        <input type="text" class="form-control" id="phone" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="email" class="required-field">邮箱地址:</label>
                        <input type="email" class="form-control" id="email" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="idCard" class="required-field">登录密码:</label>
                        <input type="password" class="form-control" id="password" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="title">职称职务:</label>
                        <input type="text" class="form-control" id="title">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="reviewFee">评审费:</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="reviewFee">
                            <div class="unit-label">元</div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="bankName">银行名称:</label>
                        <input type="text" class="form-control" id="bankName">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="bankAccount">银行卡号:</label>
                        <input type="text" class="form-control" id="bankAccount">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="organization">单位名称:</label>
                        <input type="text" class="form-control" id="organization">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="idCard">身份证号:</label>
                        <input type="text" class="form-control" id="idCard">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="required-field">评审类型（必选，可多选）:</label>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="applicationReview" name="reviewType" value="申报评审">
                            <label class="form-check-label" for="applicationReview">
                                申报评审
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="biddingReview" name="reviewType" value="标书评审">
                            <label class="form-check-label" for="biddingReview">
                                标书评审
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="acceptanceReview" name="reviewType" value="项目验收">
                            <label class="form-check-label" for="acceptanceReview">
                                项目验收
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-footer">
                    <button type="button" class="btn btn-save" id="saveBtn">
                        <i class="fa fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-cancel" id="cancelBtn">
                        <i class="fa fa-times"></i> 取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 保存按钮点击事件
            $("#saveBtn").click(function() {
                // 验证评审类型至少选择一项
                if ($('input[name="reviewType"]:checked').length === 0) {
                    alert("请至少选择一种评审类型");
                    return;
                }
                
                // 验证表单必填项
                if (!validateForm()) {
                    alert("请填写所有必填项");
                    return;
                }
                
                // 提交表单数据
                alert("评审人员信息保存成功");
                
                // 跳转回管理页面
                window.location.href = "../reviewer-management.html";
            });
            
            // 取消按钮点击事件
            $("#cancelBtn").click(function() {
                if (confirm("确定取消操作吗？已填写的内容将不会保存。")) {
                    window.location.href = "../reviewer-management.html";
                }
            });
            
            // 表单验证
            function validateForm() {
                let valid = true;
                $("#reviewerForm input[required]").each(function() {
                    if ($(this).val().trim() === "") {
                        $(this).addClass("is-invalid");
                        valid = false;
                    } else {
                        $(this).removeClass("is-invalid");
                    }
                });
                return valid;
            }
            
            // 清除图标点击事件
            $(".close-icon").click(function() {
                $(this).siblings("input").val("");
            });
            
            // 在必填项输入时移除错误提示
            $("#reviewerForm input[required]").on("input", function() {
                if ($(this).val().trim() !== "") {
                    $(this).removeClass("is-invalid");
                }
            });
        });
    </script>
</body>
</html>
